<template>
  <div class="warp" @click="handlefn()" :style="{ width: w }">
    <div class="img">
      <img :src="src" />
      <div class="text">
        <p>{{ time }}</p>
        <h1>{{ title }}</h1>
      </div>
    </div>
  </div>
</template>

<script >
import { useRouter } from "vue-router";
export default {
  name: "cardLet",
  props: {
    src: String,
    title: String,
    time: String,
    id: Number,
    w: String,
  },
  data() {
    var router = useRouter();
    /**
     * @param handlefn 跳转到视频页
     */
    const handlefn = () => {
      router.push({
        name: "Video",
        params: { id: this.$props.id },
      });
    };
    return { handlefn };
  },
  methods: {},
};
</script>

<style scoped>
.warp {
  height: auto;
}
.img {
  height: 100%;
  width: 100%;
}
.img img {
  width: 100%;
  height: 100%;
}
.img .text {
  margin-left: 15px;
  height: 0;
  font-size: 30px;
  position: relative;
  bottom: 70px;
  color: rgb(255, 248, 248);
}
.img .text p {
  margin-bottom: 7px;
  font-size: 20px;
}
</style>